<template>
    <div class="login">
        <img class="logo" :src="info.login_background   " />
        <div class="login_info">
            <img :src="info.company_logo" />
            <p class="title">{{info.company_name}}</p>
            <el-form :model="form" label-position='top' size='medium'>
                <el-form-item label="账号">
                    <el-input v-model="form.user_name" placeholder="请输入账号" suffix-icon="el-icon-s-custom"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model='form.password' placeholder="请输入密码" :type="password">
                        <template #suffix>
                            <i class="iconfont icon-chakanmima" :class="{'look': !password}" @click="look_password"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <p class="btn" @click='login_sub'>登陆</p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login, unit } from './../utils/api'
export default defineComponent({
    setup() {
        const route = useRoute();
        const router = useRouter();
        let state = reactive({
            info: {},
            password: 'password',
            form: {
                user_name: '',
                password: ''
            }
        })
        
        // 清除页面缓存
        sessionStorage.removeItem('user_info')
        sessionStorage.removeItem('logo')
        sessionStorage.removeItem('company_name')

        // 获取登录页面信息
        unit({company_id: route.query.company_id}).then(({ data }) => {
            if(data.code === 1000) {
                state.info = data.data
                sessionStorage.logo = data.data.company_logo
                sessionStorage.company_name = data.data.company_name
            }
        })
        // 查看密码
        const look_password = () => {
            if(state.password) {
                state.password = ''
            } else {
                state.password = 'password'
            }
        }
        // 登录
        const login_sub = () => {
            if(!state.form.user_name || !state.form.password) {
                ElMessage.warning({
                    type: 'warning',
                    message: '请输入账号和密码'
                })
                return
            }
            state.form.company_id = route.query.company_id
            login(state.form).then(({ data }) => {
                if(data.code === 1000) {
                    sessionStorage.nav = JSON.stringify([{title: '系统首页', url: '/home'}])
                    sessionStorage.user_info = JSON.stringify(data.data)
                    // type 1是主账号 2是子账号
                    // sessionStorage.type = data.data.type
                    router.push({path: '/home'})
                }
            })
        }

        return {
            ...toRefs(state),
            look_password,
            login_sub
        }
    },
})
</script>

<style lang="scss" scoped>
.login{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    .logo{
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .login_info{
        width: 450px;
        margin: 0 auto;
        align-self: center;
        >img{
            width: 120px;
            height: 115px;
            margin: 0 auto;
            display: block;
        }
        .title{
            margin: 20px auto 30px;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }
        .el-form{
            .el-input{
                height: 40px;
                .icon-chakanmima{
                    cursor: pointer;
                    &.look{
                        color: #4E8BF7;
                    }
                }
            }
            .btn{
                width: 100%;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: #fff;
                border-radius: 5px;
                cursor: pointer;
                color: #999;
                &:active{
                    background-color: #4E8BF7;
                    color: #fff;
                }
            }
        }
    }
}
</style>